<template>
  <div class="editor-container">
    <div class="editor" style="width: 40%">
      <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
      </quill-editor>
    </div>
    <div class="preview" style="margin-left: 50px">
      <h3>Markdown 预览</h3>
      <div v-html="markdownPreview"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {marked} from 'marked'; // 修改导入方式

const articleModel = ref({
  content: '<p>这是一个简单的富文本编辑器示例。</p>'
});

const markdownPreview = computed(() => {
  return marked.parse(articleModel.value.content);
});
</script>

<style scoped>
.editor-container {
  display: flex;
  gap: 20px;
  margin: 20px;
}

.editor, .preview {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

.editor h3, .preview h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.preview div {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
